<template>
  <div class="tab">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <span slot="icon" class="iconfont">&#xe601;</span>
        首页
      </mt-tab-item>
      <mt-tab-item id="world" @click.native="clickWorld">
        <span slot="icon" class="iconfont">&#xe627;</span>
        世界
      </mt-tab-item>
      <mt-tab-item id="route">
        <span slot="icon" class="iconfont">&#xe60b;</span>
        路线
      </mt-tab-item>
      <mt-tab-item id="mine">
        <span slot="icon" class="iconfont">&#xe648;</span>
        我的
      </mt-tab-item>
    </mt-tabbar>

    <div slot="icon" class="iconfont icon-add" @click="sheetVisible = true">&#xe6b6;</div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible" cancel-text></mt-actionsheet>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "tab",
  data() {
    return {
      selected: this.$store.state.selectedTab,
      sheetVisible: false,
      actions: []
    };
  },
  methods: {
    routeServie() {
      console.log("routeServie");
      this.$router.push("/AddRouteService");
    },

    routeDemand() {
      console.log("routeDemand");
      this.$router.push("/AddRouteDemand");
    },

    clickWorld() {
      MessageBox({
        title: "提示",
        message: "风车世界即将上线。敬请期待！",
        showCancelButton: false
      }).then(res => {
        console.log(res);
      });
    }
  },
  mounted() {
    this.actions = [
      {
        name: "发布路线服务",
        method: this.routeServie
      },
      {
        name: "发布路线需求",
        method: this.routeDemand
      }
    ];

    // this.selected = this.$route.name;
  },
  watch: {
    selected: function(newV, oldV) {
      this.$store.commit("changeSelected", newV);
      this.$router.push(newV);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variable.styl';

.app {
  position: relative;

  .mint-tabbar {
    .mint-tab-item {
      color: #707070;

      .mint-tab-item-icon {
        .iconfont {
          font-size: 0.48rem;
        }
      }
    }

    .mint-tab-item.is-selected {
      color: $themeColor;
    }
  }

  .icon-add {
    position: fixed;
    right: 0.3rem;
    bottom: 1.5rem;
    z-index: 999;
    width: 0.8rem;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.8rem;
    border-radius: 0.4rem;
    color: rgba(0, 0, 0, 0.7);
    // background-color rgba(255, 255, 255,.7);
  }
}
</style>
